<template>
    <div class="app-container">
        <!-- <div class="title">{{ detailInfo.title }}</div> -->
        <div v-if="fileInfos.length > 0" class="image">
            <el-image class="image-icon" v-for="item in fileInfos" :key="item" :src="item" :zoom-rate="1.2"
                :preview-src-list="fileInfos" fit="cover" />
        </div>
        <div v-else class="empty-view">
            <img class="empty-icon" :src="EmptyIcon" alt="">
        </div>
        <div class="content" v-html="detailInfo.introduction"></div>
    </div>
</template>

<script setup name="FruitDetail">
import EmptyIcon from '@/assets/images/empty-icon.png'
import { getFruit } from "@/api/system/fruit";
import { useRoute } from "vue-router";
/** 查询展现管理列表 */
const route = useRoute();
const baseUrl = import.meta.env.VITE_APP_BASE_API
const fileInfos = ref([])
const detailInfo = ref({});
function getDetail() {
    if (route.query.id && route.query.id !== "") {
        getFruit(route.query.id).then((response) => {
            if (response.code === 200) {
                detailInfo.value = response.data
                document.title = response.data.title
                fileInfos.value = response.data.fileInfos.map(i => baseUrl + i.url)
            }
        });
    }
}
getDetail();
</script>
<style lang="scss" scoped>
// .title{
//     font-weight: bold;
//     text-align: center;
//     color: #333;
//     height: 50px;
// }
.image-icon{
    width: 100%;
    aspect-ratio: 2/1;
}
.empty-view{
    width: 100%;
    height: pv(1000);
    display: flex;
    justify-content: center;
    .empty-icon{
        margin-top: 3rem;
        width: pv(750);
        height: pv(656);
        object-fit: cover;
    }
}
.content{
    margin-top: pv(20);
}
</style>